<template name="collect-view">
    <view class="container">
        <view class="image">
            <image
                class="mainImg"
                :src="nft.img"
                v-if="balance > 0"
                mode="aspectFit"
            ></image>
            <image
                v-else
                class="gray"
                :src="nft.img"
                mode="aspectFit"
            ></image>
            <view class="balance">「{{ balance }}」</view>
        </view>
        <view class="text">
            <u--text
                :text="nft.name"
                :lines="2"
                size="24rpx"
                color="#000000"
            ></u--text>
        </view>
    </view>
</template>
<script>
export default {
    name: "collect-view",
    props: {
        nft: {
            type: Object,
            default: {}
        },
        balance: {
            type: Number,
            default: 0
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        margin-bottom: 40rpx;
        .text {
            margin-top: 5rpx;
            height: 65rpx;
        }
        .gray {
            width:226rpx;
            height:239rpx;
            filter: grayscale(100%);
            filter: gray;
            opacity:0.7;
        }
        .mainImg {
            width:226rpx;
            height:239rpx;
        }
        .image {
            position: relative;
            .balance {
                position: absolute;
                bottom: 10rpx;
                right: 5rpx;
                font-size: 24rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #FFFFFF;
                text-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.6);
            }
            .gray {
                width:226rpx;
                height:239rpx;
                filter: grayscale(100%);
                filter: gray;
                opacity:0.7;
            }
        }
    }
</style>
